<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <i class="leftA" 
    :class="isCollapse ? ' el-icon-caret-right' : ' el-icon-caret-left'"
    @click="change" :style="isCollapse ? 'left:3.40rem':'11.65rem'"></i>
    <el-breadcrumb-item 
    :to="{ path: item.path }"
    v-for="item in list"
    :key="item.name"
    ><i :class="item.meta.icon"></i>{{item.name}}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  data() {
    return {
      list:[]
    }
  },
  props:["isCollapse"], 
  methods: {
    change(){
      this.$emit("changecoll")
    }
  },
  watch: {
    $route:{
      immediate:true,
      handler(val){
        console.log(val)
        this.list = val.matched
      }
    }
  },
};
</script>

<style lang="less">

.el-header{
  background-color: #fff;
  opacity: 0.8;
  width: 97%;
  margin: 0 auto;
  box-shadow: 5px 5px 10px 5px #ccc;
}
.el-breadcrumb{
  margin: -1.25rem .75rem;
  display:block;
}

.leftA {
  position: absolute;
    top: 23.75rem;
    left: 11.40rem;
  font-size: 1.75rem;
  color: #666; 
}
</style>